<template>
	<view class="h100">
		<canvas class="can pa" style="z-index: -1;width: 710rpx;height: 1160rpx;" canvas-id="firstCanvas"></canvas>
		<view class="bg-fff pa w100 h100">
			<view class="">
				<swiper class=" " @change="change" style="height: 1200rpx;width: 750rpx;" :indicator-dots="true"
					:interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in bgList" :key="index">
						<view class="w100 h100 p20r  pr">
							<image class="w100 h100" :src="item.i_poster" mode="">
							</image>
							<image class=" pa"
								:style="'width:'+item.i_width +'rpx;height:'+item.i_width +'rpx;top:'+item.i_top +'rpx;left:'+item.i_left +'rpx;'"
								:src="url" mode="aspectFit"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="p30r">
				<view @tap="toDrawCanvas" class="bg-zs p25r x-c bor-rad45r color-fff">{{i18n.save+i18n.code+i18n.img}}
				</view>
			</view>
			<view class="p20r">
				<view class="x-bc bor-b">
					<view class="mr20r color-999">{{i18n.my+i18n.yqlj}}:</view>
					<view class="flex1 one-t">{{invite_code}}</view>
					<view class="color-zs ml10r" @tap="copyVal(invite_code)">{{i18n.copy}}</view>
				</view>
			</view>
			<view class="p20r  pb20r">
				<view class="x-bc bor-b">
					<view class="mr20r color-999">{{i18n.my+i18n.yqm}}:</view>
					<view class="flex1 one-t ">{{u_code}}</view>
					<view class="color-zs ml10r" @tap="copyVal(u_code)">{{i18n.copy}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import h5Copy from '@/common/junyi-h5-copy/junyi-h5-copy.js'
	export default {
		data() {
			return {
				size: '',
				u_code: uni.getStorageSync('userInfo').invite_code,
				url: '',
				qrcode: '',
				FromToken: '',
				bgList: [],
				bg_url: '',
				windowWidth: '',
				windowHeight: '',
				invite_code: '',
				scale: 1,
			};
		},
		onLoad() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.windowWidth = res.screenWidth
					that.scale = res.screenWidth / 750
					that.windowHeight = res.screenHeight
				}
			});
		},
		onShow() {
			this.getFromToken();
			uni.setNavigationBarTitle({
				title: this.i18n.yqhy
			})
		},
		methods: {
			saveImg(url) {
				// let href = canvas.toDataURL("image/png");
				console.log("78", url)
				var oA = document.createElement("a");
				oA.download = '邀请好友'; // 设置下载的文件名，默认是'下载'
				oA.href = url;
				oA.download = 'index.png'
				document.body.appendChild(oA);
				oA.click();
				oA.remove(); // 下载之后把创建的元素删除
			},
			//绘制canvas
			toDrawCanvas() {
				let that = this;
				let ctx = uni.createCanvasContext('firstCanvas', this)
				let canvaWidth = 710 * that.scale
				let canvaHight = 1160 * that.scale
				let imgurl = that.bg_url.i_poster //设置背景图的路径
				ctx.drawImage(imgurl, 0, 0, canvaWidth, canvaHight)
				//绘制二维码位置
				let erweimaimg = that.url
				let towCodeX = (that.bg_url.i_left * that.scale)
				let towCodeY = (that.bg_url.i_top * that.scale)
				let towCodeW = that.bg_url.i_width * that.scale
				ctx.drawImage(erweimaimg, towCodeX, towCodeY, towCodeW, towCodeW)
				uni.showLoading({ //增加loading等待效果
					mask: true,
				})
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',
						success: (res) => {
							console.log(res.tempFilePath);
							// #ifdef H5
							that.saveImg(res.tempFilePath)
							uni.hideLoading();
							return
							// #endif
							//保存图片到系统相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: (res) => {
									uni.showToast({
										title: '保存成功'
									})
								},
								fail() {
									uni.showToast({
										icon: 'none',
										title: '保存失败'
									})
								},
								complete() {
									uni.hideLoading();
								}
							})

						}
					})
				})
				//结束绘画
			},
			getFromToken() {
				this.$api.getFromToken({
					data: 1
				}).then(res => {
					if (res.code == 1) {
						this.FromToken = res.FromToken;
						this.getInfo()
					}
				});
			},
			change(e) {
				this.bg_url = this.bgList[e.detail.current];
			},
			getInfo() {
				var that = this;
				let data = {
					uid: uni.getStorageSync('loginInfo').id,
					FromToken: this.FromToken
				}
				this.$api.inviteUserPoster(data).then(res => {
					if (res.code == 1) {
						this.bgList = res.data.invite;
						this.bg_url = this.bgList[0];//默认合成第一张
						this.url = res.data.qrcode;//二维码图片
						this.invite_code =this.global.baseUrl + "h5/#/pages/login/register?invite_code=" + this.u_code//邀请链接
					}
				})
			},
			// 复制邀请码
			copyVal(content) {
				// #ifdef H5
				const result = h5Copy(content)
				if (result === false) {
					this.$msg('复制失败，请重试');
				} else {
					this.$msg('复制成功');
				}
				return
				// #endif
				uni.setClipboardData({
					data: content,
					success: () => {
						this.$msg('复制成功');
					},
					fail: () => {
						this.$msg('复制失败，请重试');
					}
				});
			},

			save() { //保存
				let that = this
				uni.canvasToTempFilePath({
					canvasId: 'firstCanvas',
					success: (res) => {
						console.log(res.tempFilePath);
						//返回文件路径
						// that.imageUrl = res.tempFilePath
						// #ifdef H5
						that.saveImg(that.imageUrl)
						uni.hideLoading();
						return
						// #endif
						//保存图片到系统相册
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: (res) => {
								uni.showToast({
									title: '保存成功'
								})
							},
							fail() {
								uni.showToast({
									icon: 'none',
									title: '保存失败'
								})
							},
							complete() {
								uni.hideLoading();
							}
						})

					}
				})

			},
			// // 保存海报

		}
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		// background-color: #FFFFFF;
	}

	.jui_footer {
		bottom: 20rpx;
		// background-color: ;
		justify-content: space-around;
		background: none !important;
		z-index: 1000;
	}

	.jui_top {
		position: fixed;
		width: 100%;
		top: 110rpx;
		left: 20rpx;
		z-index: 1000;
	}

	.btn {
		width: 40%;
		background-color: $zhuse;
		height: 80rpx;
		border-radius: 20rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
	}

	.bg {
		width: 100%;
		height: 102vh;
		position: relative;
	}

	.con {
		width: 100%;
		height: 93.7vh;
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;

		.codeCon {
			position: absolute;
			// width: 78%;
			// background: #fff;
			border-radius: 10upx;
			// box-shadow: 0 0 10px #b58484;
			text-align: center;

			image {
				width: 240upx;
				height: 240upx;
				margin: 40upx auto 0;
				display: block;
			}

			.code {
				font-size: 44upx;
				color: $zhuse;
				font-weight: 600;
				margin-top: 12upx;
			}

			.txt {
				color: #808080;
			}
		}

		.copyBtn {
			/* #ifdef H5 */
			display: none;
			/* #endif */
		}

		.btn {
			width: 58%;
			height: 70upx;
			line-height: 70upx;
			border-radius: 40upx;
			text-align: center;
			background: $zhuse;
			color: #fff;
			margin: 60upx auto 6upx;
		}
	}

	.can {
		position: absolute;
		top: 0;
		// width: 100%;
		// height: 100%;
		// opacity: 0;
	}
</style>
